import React, { Component } from 'react';
import Button from 'antd/es/button';
import './App.css';
const SCesLayAdd = require('./SCesLayAdd');
const {SerJSONAdd} = require('./SerJSONAdd');
const EntityThematic = require('./EntityThematic');
const {CesiumFun} = require('./CesiumFun');
const CanvasImg = require('./CanvasImg');
const Cesium  = window.Cesium;
const ENABLED = true, PIXELRANGE = 30, MINCLUSTERSIZE = 3;
const COMRATE = 0.8, BASESIZE = 30;
const comheight = 0, width = 80, height = 80, lineHeight = 0;
let labelListener = undefined;
class App extends Component {

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        // let videoWrapper = "testVideoWrapper";
        // let videoBox = "testVideoBox";
        // let player = videojs(videoBox);
        // player.play();

        var viewer = new Cesium.Viewer("cesiumContainer", {
            shadows: false, 
            navigation: true,
            //加载bing地图
            imageryProvider: new Cesium.BingMapsImageryProvider({
                key: 'AnGgQ-Iyh9xx1sCL3p9DdFFllIYPvYTSpp_6BD5WYjn1s2DOy5VJ9t_1o1eo3oRx',
                url: 'https://dev.virtualearth.net',
                mapStyle: Cesium.BingMapsStyle.AERIAL
            }),
        });
        window.CesiumViewer = viewer;
        let pSCesLayAdd = new SCesLayAdd();
        pSCesLayAdd.toCenter(null);
        this.MapLayerLoad(viewer);
        this.RYFB();
        let pSerJSONAdd = new SerJSONAdd();
        pSerJSONAdd.StationInit(null);
    }

    MapLayerLoad = (viewer) => {
        try {
            let pSCesLayAdd = new SCesLayAdd();
            pSCesLayAdd.TOPOJSONAdd(viewer, function (dataSource) {
                let pEntityThematic = new EntityThematic();
                pEntityThematic.ThematicMaterical(dataSource);
            }, function (LayerArr) {
               // _this.LayerAddChange(LayerArr, pLayerObj.ThematicAdded);
            });
            pSCesLayAdd.toCenter();
        } catch (e) {
            console.log("SuperMap服务(image、S3M、Scene)加载失败：", e);
        }

        return this.viewer;
    }
    RYFB = ()=>{
        let dataArr = window.ryfb;
        let RYFBNAME = "RYFB";
        let entityNum =0;
        if (dataArr) {
            let pCesiumfun = new CesiumFun();
            let tempds = pCesiumfun.dsgetbyname(RYFBNAME);
            if (tempds && tempds.entities && tempds.entities.values && tempds.entities.values.length > 0) {
                tempds.entities.removeAll();
            }
            entityNum = 0;
            for (let i in dataArr) {
                try {
                    let lon = dataArr[i].x;
                    let lat = dataArr[i].y;
                    if (this._LngLatCheck(lon, lat)) {
                        let tentity = this.CreateGJEntity(lon, lat, dataArr[i], tempds, RYFBNAME, null);
                        // console.log(i,"@",tentity);
                        entityNum += tentity;
                    }
                } catch (e) {

                }
            }
            this.labelClusterInit(tempds);
            tempds.show = true;
        }
    }
    _LngLatCheck = (lon, lat) => {
        let reg = /^[0-9]+.?[0-9]*$/;
        if (lon && lat && reg.test(lon) && reg.test(lat)) {
            if (lon > -180 && lon < 180 && lat > -90 && lat < 90) {
                return true;
            }
        }
        return false;
    }
    depColorIndex = (itemdeptId, depColor) => {
        if (depColor && depColor.length > 0) {
            for (let i = 0; i < depColor.length; i++) {
                // if(itemdeptId==depColor[i].deptId){
                if (itemdeptId == depColor[i].id) {
                    // if(itemdeptId==depColor[i].name){
                    return i;
                }
            }
        }
        return -1;
    }
    CreateGJEntity (lon, lat, props, tempds, layname, callBack) {
        try {
            let stimage = window.sstimage;
            let itemdeptId = -1;
            let depColor=[];
            let ncolorindex = this.depColorIndex(itemdeptId, depColor);
            if (ncolorindex != -1) {
                if (depColor[ncolorindex] && depColor[ncolorindex].MarkerImage) {
                    let res = depColor[ncolorindex].MarkerImage;
                    this._AddEntity(lon, lat, res, props, tempds, layname);
                } else if (!depColor[ncolorindex].MarkerImage) {
                    let pCanvasImg = new CanvasImg();
                    pCanvasImg.ImgColor(stimage, "#1c98e8", depColor[ncolorindex].color, (res) => {
                        this._AddEntity(lon, lat, res, props, tempds, layname);
                    });
                }
            } else {
                this._AddEntity(lon, lat, stimage, props, tempds, layname);
                for (let i = 0; i < depColor.length; i++) {
                    if (depColor[i].id == "-1") {
                        return 1;
                    }
                }
                depColor = [...depColor, { id: "-1", name: "未分部门人员", MarkerImage: stimage }];
            }
            return 1;
        } catch (e) {
            console.log("人员实时位置实体创建失败：", e);
            return 0;
        }
    }
    _AddEntity = (lon, lat, res, props, tempds, layname, index) => {
        try {
            let num = index + 1;
            let Cesium = window.Cesium;
            let billboard = new Cesium.Entity({
                position: new Cesium.Cartesian3.fromDegrees(lon, lat, comheight),
                billboard: {
                    image: res,
                    width: width,
                    height: height,
                    scale: 0.3,
                    //eyeOffset:new Cesium.ConstantProperty(new Cesium.Cartesian3(0, 0, -2)),
                },
                id: props.id || props.name + num,
                name: layname,
            });
            billboard.properties = props;
            billboard.stnm = props.name;
            billboard.layername = layname;
            if (billboard !== null && typeof (billboard) === "object") {
                tempds.entities.add(billboard);
            }
        } catch (e) {
            console.log("实体创建出错：", e);
        }

    }
    labelClusterInit = (dsCluster) => {
        labelListener = undefined;
        let Cesium = window.Cesium;
        dsCluster.clustering.enabled = ENABLED;
        dsCluster.clustering.pixelRange = PIXELRANGE;
        dsCluster.clustering.minimumClusterSize = MINCLUSTERSIZE;
        let stimage = window.RGJCLuster;
        if (Cesium.defined(labelListener) && labelListener != null) {
            labelListener();
            labelListener = undefined;
        } else {
            labelListener = dsCluster.clustering.clusterEvent.addEventListener(function (clusteredEntities, cluster) {
                cluster.billboard.show = true;
                cluster.label.show = true;
                cluster.layname = "RGJcluster";
                let Totalnum = clusteredEntities.length;
                var pinimg = stimage;
                if (clusteredEntities.length >= 2) {
                    cluster.billboard.image = pinimg;
                    cluster.billboard.width = BASESIZE + Totalnum * COMRATE;
                    cluster.billboard.height = BASESIZE + Totalnum * COMRATE;
                    // cluster.billboard.image = getSystemConfig().URL_STIMAGE.BASE;
                    cluster.label.horizontalOrigin = Cesium.HorizontalOrigin.CENTER;
                    cluster.label.verticalOrigin = Cesium.VerticalOrigin.CENTER;
                    cluster.label.font = "40px Helvetica Neue,Helvetica,Verdana,Arial,sans-serif";
                    cluster.label.scale = 0.5;
                    cluster.label.fillColor = Cesium.Color.BLACK;
                    // cluster.label.fillColor= Cesium.Color.WHITE;
                    cluster.label.pixelOffset = new Cesium.Cartesian2(0.0, 0);
                    cluster.label.eyeOffset = new Cesium.Cartesian3(0.0, 0, -10);
                    cluster.label.style = Cesium.LabelStyle.FILL_AND_OUTLINE;
                }
            });
        }

        let pixelRange = dsCluster.clustering.pixelRange;
        dsCluster.clustering.pixelRange = 0;
        dsCluster.clustering.pixelRange = pixelRange;
        return dsCluster;
    }
    render() {
        return (
            <div className="App">
                {/*<Button type="primary">Button</Button>*/}
                {/*<VideoPlay/>*/}
                <div id="cesiumContainer" style={this.props.style}></div>
            </div>
        );
    }
}

export default App;


// import  {Component} from 'react';


// const videojs = window.videojs;
// class Test extends React.Component {
//     constructor(props) {
//         super(props);
//     }
//
//     componentDidMount() {
//         let videoWrapper = "testVideoWrapper";
//         let videoBox = "testVideoBox";
//         let player = videojs(videoBox);
//         player.play();
//
//     }
//
//     render() {
//         console.log("测试视频监控")
//         return (
//             <div>
//                 <h3>实时监控2</h3>
//                 <div id="testVideoWrapper" style={{width: 300, height: 200}}>
//                     <video-js id="testVideoBox" className="vjs-default-skin" controls width="300" height="200">
//                         <source
//                             src="http://218.77.107.71:6713/mag/hls/86c7e028e7904878997f101d9f088371/1/live.m3u8"
//                             type="application/x-mpegURL"/>
//                     </video-js>
//                 </div>
//             </div>
//         );
//     }
//
// }
//
// //本组件与STATE的关联
// function mapStateToProps(state, ownProps) {
//     return
//     {
//     }
// }
//
// //本组件动作与reducer的关联，派发动作
// function mapDispatchToProps(dispatch) {
//     return {};
// }
//
// export default Test;